<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用途</title>
<link href="usage.css" rel="stylesheet" type="text/css"/>
<script src="../js/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
	function init(){
		$('#usage_main_title ul li').click(
			function(){
				var $checkElement = $(this);
				var $usage_gird = $('#usage_gird');
				var $usage_detail = $('#usage_detail');
				if($checkElement.is('li')&& $checkElement.attr('id')=="usageGird"){
					if($usage_gird.is(':visible')){
						//$checkElement.toggle();
						return false;//防止类似标签<a>的链接
					}else{	
						$checkElement.next().removeClass('usage_selected');	
						$usage_detail.hide();
						$checkElement.addClass('usage_selected');	
						$usage_gird.show();
						return false;
					}
				}else if($checkElement.is('li') && $checkElement.attr('id')=="usageDetail"){
					if($usage_detail.is(':visible')){
						//$checkElement.toggle();
						return false;//防止类似标签<a>的链接
					}else{
						$checkElement.prev().removeClass('usage_selected');	
						$usage_gird.hide();
						$checkElement.addClass('usage_selected');	
						$usage_detail.show();
						return false;
					}
				}
			}
		);
	}
	$(function(){
		init();
	});
</script>
</head>	
<body>
	<div class="np_usage">
    	<div class="np_usage_bar">
        	<ul>
            	<li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="np_usage_tree">
        	
        </div>
        <div class="np_usage_detail">
        	<div class="np_usage_detail_M">
            	<div id="usage_main_title">
                    <ul>
                    	<li class="usage_selected"  id="usageGird"><a>用途列表</a></li>
                        <li  id="usageDetail"><a>用途详细</a></li>
                    </ul>
                </div>
                <div id="usage_main_detail">
                	<div id="usage_gird">   
                    <table>
                     	<thead>
                        	<tr style="height:25px;">
                                <td>序号</td>
                                <td>用途名称</td>
                                <td>所属上级</td>
                                <td>用途备注</td>
                             </tr>
                        </thead>
                        <tbody>
                        	<tr>
                            	<td>1</td>
                                <td>Sorry</td>
                                <td>Apolo</td>
                                <td>it's</td>
                            </tr>
                            <tr>
                            	<td>2</td>
                                <td>Sorry</td>
                                <td>Apolo</td>
                                <td>it's</td>
                            </tr>
                            <tr>
                            	<td>3</td>
                                <td>Sorry</td>
                                <td>Apolo</td>
                                <td>it's</td>
                            </tr>
                            <tr>
                            	<td>4</td>
                                <td>Sorry</td>
                                <td>Apolo</td>
                                <td>it's</td>
                            </tr>
                            <tr>
                            	<td>5</td>
                                <td>Sorry</td>
                                <td>Apolo</td>
                                <td>it's</td>
                            </tr>
                            <tr>
                            	<td>6</td>
                                <td>Sorry</td>
                                <td>Apolo</td>
                                <td>it's</td>
                            </tr>
                            <tr>
                            	<td>7</td>
                                <td>Sorry</td>
                                <td>Apolo</td>
                                <td>it's</td>
                            </tr>
                            <tr>
                            	<td>8</td>
                                <td>Sorry</td>
                                <td>Apolo</td>
                                <td>it's</td>
                            </tr>
                            <tr>
                            	<td>9</td>
                                <td>Sorry</td>
                                <td>Apolo</td>
                                <td>it's</td>
                            </tr>
                        </tbody>
                     </table>
                     <div id="usage_page">
                     	<ul>
                        	<li><a class="usage_page_style">首&nbsp;&nbsp;页</a></li>
                            <li><a class="usage_page_style">上一页</a></li>
                            <li><a>1</a></li>
                            <li><a>2</a></li>
                            <li><a>3</a></li>
                            <li><a class="usage_page_style">下一页</a></li>
                            <li><a class="usage_page_style">末&nbsp;&nbsp;页</a></li>
                        </ul>
                     </div>
                     
                    </div>
                    <div id="usage_detail" style="display:none;">
                    	<div class="usage_detail_head"><span>用途</span></div>
                        <div class="usage_detail_body">
                    	<form>
                        	<div class="ud_ipt">
                            	<label class="lb">用途名称:</label>
                                <input class="ipt" name="usage_name" type="text"/>
                            </div>
                            <div class="ud_ipt">
                            	<label class="lb">所属上级:</label>
                                <input class="ipt" name="usage_parent" type="text"/>
                            </div>
                            <div class="ud_ipt">
                            	<input type="submit" value="提&nbsp;交" class="btn"/>
                                <input type="reset" value="重&nbsp;置"  class="btn"/>
                            </div>
                        </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
